<template>
  <div class="exchange-page common-page">
    <van-cell-group>
      <van-cell>
        <template #title>
          <van-field
            v-model="amount"
            placeholder="输入兑换蔚来贝的数量"
            type="digit"
          />
        </template>
      </van-cell>
      <van-cell
        :title="title"
        class="exchange-button-box"
      >
        <template #default>
          <van-button
            type="primary"
            @click="exchangeAll"
          >全部兑换</van-button>
        </template>
      </van-cell>
    </van-cell-group>
    <van-button
      type="primary"
      class="exchange-btn"
      round
      :disabled="disabled"
      @click="commitExchange"
    >立即兑换</van-button>
    <dialog-custom
      ref="dialog"
      title="兑换成功"
      message="请前往蔚来校园使用"
      confirmButtonText="我知道了"
      confirmButtonColor="#1677FF"
      @confirm="confirmClick"
    ></dialog-custom>
  </div>
</template>

<script>
import { Field, Cell, CellGroup, Button } from "vant";
import DialogCustom from "@/components/DialogCustom";
import Exchange from "./mixin/exchange";
import apiCash from "@/common/api/apiCash";
import Share from "./mixin/share";

export default {
  name: "ExchangeCenter",
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [DialogCustom.name]: DialogCustom,
  },
  mixins: [Exchange,Share],
  data() {
    return {
      amount: "",
      exchangeInfo: {},
      title: "",
    };
  },
  computed: {
    disabled: function () {
      if (this.amount) {
        return false;
      }
      return true;
    },
  },
  created() {
    if (this.$route.query.exchangeInfo) {
      let exchangeInfo = JSON.parse(this.$route.query.exchangeInfo) || {};
      this.exchangeInfo = exchangeInfo;
      this.title = "可用金额" + exchangeInfo.balance + "元";
    }
    this.setShare();
  },
  mounted() {},
  methods: {
    //  全部兑换
    exchangeAll() {
      this.amount = this.exchangeInfo.balance;
    },
    // 立即兑换
    commitExchange() {
      if (!this.token) {
        this.getExchangeAmountToken();
        return;
      }
      this.exchangeAmount();
    },
    // 点击我知道了
    confirmClick() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.van-cell.exchange-button-box {
  padding-top: 0;
  padding-bottom: 0;
  .van-button--primary {
    font-size: 28px;
    color: #3f87f0;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    height: 90px;
    line-height: 90px;
  }
  .van-cell__title {
    line-height: 90px;
    font-size: 28px;
    color: #999999;
  }
}
.van-cell.van-field {
  padding: 0;
  height: 120px;
  font-size: 48px;
  color: #222222;
  line-height: 120px;
}
.exchange-btn.van-button--primary {
  width: 100%;
  height: 90px;
  background: #3f87f0;
  border-radius: 45px;
  font-size: 36px;
  color: #ffffff;
  border: none;
  margin-top: 64px;
}
</style>
